<template>
	<view class="video-comment" :class="{show: visible}">
		<view class="video-comment-mask" @click="handleMaskClick"></view>
		<view class="video-comment-wrapper">
			666{{String(visible)}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},

		methods: {
			handleMaskClick () {
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
.video-comment {
	.video-comment-mask {
		display: none;
		position: absolute;
		inset: 0;
	}
	.video-comment-wrapper {
		font-size: 28upx;
		height: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: deeppink;
		transform-origin: bottom center;
		transition: height .3s ease-in-out;
	}
	&.show {
		.video-comment-mask {
			display: block;
		}
		.video-comment-wrapper {
			height: 65vh;
		}
	}
}
</style>
